import { createRouter, createWebHashHistory } from "vue-router"
import Home from "@/pages/Home.vue"
import News from "@/pages/News.vue"
import About from "@/pages/About.vue"
import Detail from "@/pages/Detail.vue"

// 1,路由组件通常存放在pages或views文件夹下,一般组件通常存放在components文件夹下
// 2,通过点击导航,视觉效果上"消失"了的路由组件,默认是被卸载(Unmounted)掉的,需要的时候再去挂载.
// 一般组件,程序员写出来的

const router = createRouter({
  history: createWebHashHistory(), // 路由器的工作模式
  routes: [
    {
      name: "nHome", // 路由规则名称
      path: "/home",
      component: Home, // 路由组件,由路由规则渲染出来的
    },
    {
      name: "nNews",
      path: "/news",
      component: News,
      children: [
        {
          name: "nDetail",
          // path: "detail/:id/:title/:content?", // ?,可传可不传的参数
          path: "detail", // ?,可传可不传的参数
          component: Detail,
          // props 第1种写法,将路由收到的所有params参数作为props传给路由组件
          // props: true,
          // props 第2种写法,函数式,可以自己决定将什么作为props传给路由组件
          props: (route) => {
            // return route.params 可以直接用 props:true 代替
            return route.query // 用query参数时
          },
          // props 第3种写法,对象式,也可以自己决定将什么作为props传给路由组件
          // 只能写死,用得很少
          /*
          props: {
            id: 100,
            title: 200,
            content: 300,
          },
          */
        },
      ],
    },
    {
      name: "nAbout",
      path: "/about",
      component: About,
    },
  ],
})

export default router
